<template>
  <div class="dark:bg-gray-900 min-h-screen rounded-md">
    <h1
      class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8"
    >
      学习路线
    </h1>

    <div class="flex flex-col gap-y-8">
      <template v-for="(rowStages, rowIndex) in groupedStages" :key="rowIndex">
        <div
          :class="[
            'flex items-center w-full gap-x-4',
            rowIndex % 2 === 0 ? 'flex-row' : 'flex-row-reverse'
          ]"
        >
          <template v-for="(stage, stageIndex) in rowStages" :key="stageIndex">
            <div
              class="relative flex flex-col justify-between dark:bg-gray-800 shadow-lg rounded-md p-4 flex-1"
            >
              <div>
                <div class="flex items-center justify-between w-full mb-2">
                  <div
                    class="flex-shrink-0 w-8 h-8 bg-blue-500 text-white flex items-center justify-center rounded-full"
                  >
                    {{ stage.order }}
                  </div>
                </div>

                <h2
                  class="text-lg font-semibold text-gray-800 dark:text-white mb-2"
                >
                  {{ stage.title }}
                </h2>
                <p class="text-sm text-gray-600 dark:text-gray-400">
                  {{ stage.description }}
                </p>
              </div>
              <!-- 完成时间和打勾标志 -->
              <!-- 卡片完成时间和图标 -->
              <div class="flex items-center justify-end mt-4">
                <p class="text-sm text-gray-500 mr-2">
                  完成时间：{{ stage.completedTime }}
                </p>
                <!-- 根据 status 动态渲染 -->
                <svg
                  v-if="stage.status"
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5 text-green-500"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M5 13l4 4L19 7"
                  />
                </svg>
                <svg
                  v-else
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5 text-yellow-500"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M12 6v6l4 2m6-2a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>
              </div>
            </div>
            <div
              v-if="stageIndex < rowStages.length - 1"
              class="h-2 bg-green-500"
              :class="rowIndex % 2 === 0 ? 'w-12' : 'w-8'"
            ></div>
          </template>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 数据源
const stages = ref([
  {
    title: 'HTML & CSS 基础',
    description: '学习 HTML 和 CSS 的基础知识，掌握网页布局。',
    order: 1,
    completedTime: '2022-07-10',
    status: true
  },
  {
    title: 'JavaScript 基础',
    description: '掌握 JavaScript 的语法和基本操作。',
    order: 2,
    completedTime: '2022-08-28',
    status: true
  },
  {
    title: 'HTTP&AJAX',
    description: '学习HTTP协议掌握基本状态码学习前后端数据交互',
    order: 3,
    completedTime: '2022-09-10',
    status: true
  },
  {
    title: '学习ES6新语法',
    description: '学习Promise、async/await等新语法。掌握EventLoop事件循环',
    order: 4,
    completedTime: '2022-09-30',
    status: true
  },
  {
    title: '渐进式框架Vue.js',
    description: '学习Vue框架掌握组件化开发',
    order: 5,
    completedTime: '2022-11-03',
    status: true
  },
  {
    title: '渐进式框架React.js',
    description: '学习React框架掌握组件化开发',
    order: 6,
    completedTime: '2023-01-15',
    status: true
  },
  {
    title: 'NodeJS',
    description: '学习Nodejs,使用JS编写api接口',
    order: 7,
    completedTime: '2023-02-22',
    status: true
  },
  {
    title: 'Mysql',
    description: '学习数据库掌握基本增删改查',
    order: 8,
    completedTime: '2023-03-10',
    status: true
  },
  {
    title: 'Redis',
    description: '学习Redis掌握基本操作',
    order: 9,
    completedTime: '2023-03-20',
    status: true
  },
  {
    title: 'TypeScript',
    description: '学习TypeScript掌握类型约束规范代码',
    order: 10,
    completedTime: '2023-04-01',
    status: true
  },
  {
    title: '微信小程序开发',
    description: '学习微信小程序开发',
    order: 11,
    completedTime: '2023-05-15',
    status: true
  },
  {
    title: 'Uniapp',
    description: '学习uniapp跨平台开发小程序',
    order: 12,
    completedTime: '2023-05-01',
    status: true
  },
  {
    title: 'Electron',
    description: '学习electron跨平台开发桌面应用',
    order: 13,
    completedTime: '2024-12-10',
    status: false
  },
  {
    title: 'Next',
    description: 'NextJs学习',
    order: 14,
    completedTime: '2024-12-30',
    status: false
  }
])

// 动态计算分组逻辑
const computeStagesPerRow = () => {
  const viewportWidth = window.innerWidth
  if (viewportWidth >= 1024) return 3
  if (viewportWidth >= 768) return 2
  return 1
}

const stagesPerRow = ref(computeStagesPerRow())

const groupedStages = computed(() => {
  const result = []
  for (let i = 0; i < stages.value.length; i += stagesPerRow.value) {
    result.push(stages.value.slice(i, i + stagesPerRow.value))
  }
  return result
})

// 监听窗口大小变化
window.addEventListener('resize', () => {
  stagesPerRow.value = computeStagesPerRow()
})
</script>

<style scoped></style>
